// 通用表单容器 
<template>
<Form  :label-width='labelWith' label-position='left' :model='data' :rules='validate'>

    <Row :gutter='20'>
        <Col :span='mod.span' v-for='(mod, index) of mods' :key='mod.key'>
            <FormItem  :label-width='mod.labelWidth' :label='mod.label' :prop='mod.key'>
                <component 
                :is="parckComponent(mod.component)" 
                :conf='mod.conf' 
                v-model="data[mod.key]"></component>
            </FormItem>
        </Col>
    </Row>
    
</Form>
</template> 

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

// 包装组件构造器
import parckComponent from '@/components/ivew_components/parck_components/index'

@Component({})
export default class carInfoBase extends Vue{
    name:string = 'common-form'

    // 表单数据
    @Prop()
    data

    // 模块配置
    @Prop()
    mods:formInf.parckCmp[]

    // 标题宽度
    @Prop({
        default: 80
    })
    labelWith:number

    parckComponent = parckComponent

    // 提取表单验证
    get validate (){
        let ruleValidate = {};

        this.mods.forEach(mod =>{

            if(mod.ruleValidate && mod.ruleValidate.length){
                ruleValidate[mod.key] = mod.ruleValidate;
            }
            
        })

        return ruleValidate;
        
    }
   
}


</script>

<style scoped lang='scss'>

.content{
    padding-left: _rem(6px);
}
</style>